<script lang="ts" setup>
// #region 引入包, 函数和组件
import { useMusicStore } from "@/store"
import { ref } from "vue"
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const music = useMusicStore() // 仓库
// #endregion

// #region // 变量
const pop = ref<{ open: (type: "bottom") => void; close: () => void } | null>(
  null,
)

// #endregion

// #region // 函数
// 播放或暂停
const playSong = () => {
  if (!music.song) return
  if (!music.song.data[0].url) return music.audio.pause()
  // console.log(music.playStatus)
  music.changeCanplay(true)
  if (music.playStatus) {
    music.audio.pause()
  } else {
    music.audio.play()
    // console.log('开始')
  }
}
// #endregion

// #region // 生命周期和vue函数
if (!music.song && music.currentIndex + 1) music.getUrl()
// #endregion
</script>

<template>
  <view class="player_out" @click="music.toPage('/pages/player/player')" v-if="music.song && music.currentIndex + 1">
    <view class="no">
      <image :src="music.songsList[music.currentIndex].al.picUrl"></image>
    </view>
    <view class="item_name">
      {{ music.songsList[music.currentIndex].name }}
    </view>
    <view class="btn" @click.stop="playSong">
      <view class="bafang" v-if="!music.playStatus">
        <svg t="1750384805430" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="6313">
          <path
            d="M0 512a512 512 0 1 1 512 512A512 512 0 0 1 0 512z m64 0A448 448 0 1 0 512 64 448 448 0 0 0 64 512z m317.6448 198.587733a44.049067 44.049067 0 0 1-23.534933-39.355733V352.768a43.9808 43.9808 0 0 1 23.534933-39.355733 46.984533 46.984533 0 0 1 46.984533 0.1536L710.621867 472.746667a44.663467 44.663467 0 0 1 0 78.404266l-281.975467 159.232a47.0528 47.0528 0 0 1-46.984533 0.1536z"
            fill="#c84341" p-id="6314"></path>
        </svg>
      </view>
      <view class="zanting" v-else>
        <svg t="1750465535689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="4036" width="32" height="32">
          <path
            d="M512.862059 1023.999349A511.999674 511.999674 0 0 1 313.472753 40.078252a511.999674 511.999674 0 0 1 398.778611 942.840888 508.993805 508.993805 0 0 1-199.389305 41.080209z m0-943.842844C274.396457 80.156505 81.018889 273.534073 81.018889 511.999674s193.377568 431.84317 431.84317 431.84317 431.84317-194.379524 431.843169-431.84317S750.325704 80.156505 512.862059 80.156505z"
            fill="#ffffff" p-id="4037"></path>
          <path
            d="M395.63317 754.473101a40.078252 40.078252 0 0 1-40.078252-40.078252V332.649495a40.078252 40.078252 0 0 1 80.156505 0v381.745354a40.078252 40.078252 0 0 1-40.078253 40.078252zM634.098772 754.473101a40.078252 40.078252 0 0 1-40.078252-40.078252V332.649495a40.078252 40.078252 0 0 1 80.156505 0v381.745354a40.078252 40.078252 0 0 1-40.078253 40.078252z"
            fill="#ffffff" p-id="4038"></path>
        </svg>
      </view>
    </view>
    <!-- 歌曲列表 -->
    <view class="list" @click.stop="pop?.open('bottom')">
      <uni-icons type="list" color="#333333" size="50rpx"></uni-icons>
    </view>

    <view class="item_ar">
      {{music.songsList[music.currentIndex].ar.map((v) => v.name).join("/")}}
    </view>
  </view>
  <!-- 歌曲列表弹窗 -->
  <uni-popup ref="pop" type="bottom">
    <scroll-view scroll-y class="songlist">
      <uni-section title="播放列表" type="line"></uni-section>
      <view class="list_item" v-for="(item, index) in music.songsList" @click="music.changeSongsList(item)">
        <view class="no">
          <image :src="item.al.picUrl"></image>
        </view>
        <view class="item_name">{{ item.name }}</view>
        <uni-icons type="forward" color="#bbbbbb"></uni-icons>
        <view class="item_ar">{{item.ar.map((v) => v.name).join("/")}}</view>
      </view>
    </scroll-view>
  </uni-popup>
</template>

<style lang="scss" scoped>
.player_out {
  height: 98rpx;
  display: grid;
  padding: 0 24rpx;
  padding-left: 30rpx;
  grid-template-columns: 80rpx auto 72rpx 72rpx;
  grid-template-rows: 38rpx 32rpx;
  grid-row-gap: 6rpx;
  border-top: 2rpx solid #f1f1f1;
  box-sizing: border-box;
  align-content: center;

  .no {
    grid-row: span 2;

    image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 6rpx;
    }
  }

  .item_name,
  .item_ar {
    font-size: 28rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 30rpx;
  }

  .item_name {
    font-size: $uni-font-size-base;
    color: #3b4144;
  }

  .item_ar {
    font-size: $uni-font-size-sm;
    color: #999;
  }

  .list {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn {
    background: none;
    width: 80rpx;
    height: 80rpx;
    grid-row: span 2;
    display: flex;
    align-items: center;
    justify-content: center;

    view {
      width: 50rpx;
      height: 50rpx;
    }

    svg {
      width: 50rpx;
      height: 50rpx;

      path {
        fill: #333;
      }
    }
  }
}

.songlist {
  background: #fff;
  height: 60vh;
  padding-bottom: var(--window-bottom);

  :deep(.line) {
    background: $uni-bg-color-wyyRed;
  }
}

.list_item {
  display: grid;
  padding: 24rpx;
  padding-left: 30rpx;
  grid-template-columns: 100rpx auto 72rpx;
  grid-template-rows: 38rpx 32rpx;
  grid-row-gap: 6rpx;
  border-top: 2rpx solid #f1f1f1;

  .no {
    grid-row: span 2;

    image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 6rpx;
    }
  }

  .item_name,
  .item_ar {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .item_name {
    font-size: $uni-font-size-base;
    color: #3b4144;
  }

  .uni-icons {
    grid-row: span 2;
    display: flex;
    align-items: center;
    justify-content: end;
  }

  .item_ar {
    font-size: $uni-font-size-sm;
    color: #999;
  }
}
</style>
